<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击出图片</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <span :style="{background: corlor1}" @click="fn1">教父</span>
        <span :style="{background: corlor2}" @click="fn2">阿甘正传</span>
        <span :style="{background: corlor3}" @click="fn3">楚门的世界</span>
        <span :style="{background: corlor4}" @click="fn4">盗梦空间</span>
        <div>
            <img :src="src" alt="" style="height: 300px;width: 300px;">
        </div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            corlor1:"red",
            corlor2:"white",
            corlor3:"white",
            corlor4:"white",
            src:"img/001.jpg"
        },
        methods: {
            fn1(){
                this.corlor1="red"
                this.corlor2="white"
                this.corlor3="white"
                this.corlor4="white"
                this.src="img/001.jpg"
            },
            fn2(){
                this.corlor1="white"
                this.corlor2="red"
                this.corlor3="white"
                this.corlor4="white"
                this.src="img/002.jpg"
            },
            fn3(){
                this.corlor1="white"
                this.corlor2="white"
                this.corlor3="red"
                this.corlor4="white"
                this.src="img/003.jpg"
            },
            fn4(){
                this.corlor1="white"
                this.corlor2="white"
                this.corlor3="white"
                this.corlor4="red"
                this.src="img/004.jpg"
            }
        },
    })
</script>
</html>